<template>
  <div>
    <Page auto-content-height>
      <!-- 表格 -->
      <FosoTable table-title="令牌管理" table-titlehelp="令牌帮助">
        <!-- 状态列 -->
        <template #status="{ row }">
          <StatusColumn :request-api="updateApi" :row="row" />
        </template>
      </FosoTable>
    </Page>
  </div>
</template>

<script setup lang="tsx">
import { Page } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { updateApi } from '#/api/sys/api';
import { getTokenList } from '#/api/sys/token';
import { useFosoTable } from '#/components/FosoTablePro/use-foso-config';
import { useFosoTableConfig } from '#/components/FosoTablePro/use-foso-table';
// 使用 useFosoTable hook 生成配置
const { gridOptions } = useFosoTableConfig({
  columns: [
    {
      type: 'checkbox',
      width: 50,
    },
    {
      title: $t('sys.token.UUID'),
      field: 'uid',
    },
    {
      title: $t('sys.token.userName'),
      field: 'username',
    },
    {
      title: $t('sys.token.token'),
      field: 'token',
    },

    // 状态
    {
      title: $t('sys.role.status'),
      field: 'status',
      slots: {
        default: 'status',
      },
    },
    // 创建时间
    {
      title: $t('sys.menu.createTime'),
      field: 'createTime',
      formatter: ['formatDate', 'yyyy-MM-dd'],
      width: 180,
    },
    // 隐藏
    {
      title: $t('sys.token.ExpirationDate'),
      field: 'expiredAt',
      formatter: ['formatDate', 'yyyy-MM-dd'],
    },
  ],

  requestApi: getTokenList,
});

const { FosoTable } = useFosoTable(gridOptions);
</script>
